<template>
  <div>
    <h1>学生管理系统</h1>
  姓名： <el-input style="display:inline" v-model="paramsObj.name" />
 起始日期： <el-date-picker v-model="paramsObj.startDate" type="date" value-format="YYYY-MM-DD"/>
 结束日期： <el-date-picker v-model="paramsObj.endDate" type="date" value-format="YYYY-MM-DD"/>

      <el-button type="primary" @click="findByItem(1)">
        <el-icon><Filter/></el-icon>查找
      </el-button>
    <!--表格-->
    <el-table :data="stuIPage.records" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="birthday" label="生日"/>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column label="操作">
        <template #default="scope">

          <el-button size="small" @click="findById(scope.row)">修改</el-button>

          <!--确认框？-->
          <el-popconfirm
              title="确定要删除吗？"
              confirm-button-text="是"
              cancel-button-text="否"
              icon-color="#626AEF"
              @confirm="del(scope.row)"
              @cancel="cancelEvent">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        v-model:currentPage="stuIPage.current"
        v-model:page-size="stuIPage.size"
        background
        layout="prev, pager, next, jumper"
        :total="stuIPage.total"
        @current-change="pageClick"
    />
    <el-button type="primary" @click="addVisible=true">添加</el-button>

    <!--修改弹出框-->
    <el-dialog
        v-model="updateVisible"
        title="学生信息"
        width="30%"
        draggable
    >
      <!--正文-->
      <span>
       编号： {{ updateObj.id }}<br>
       姓名： {{ updateObj.name }}<br>
       生日： {{ updateObj.birthday }}<br>
       电话：<input v-model="updateObj.phone">
      </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="update()">
         确认
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--添加弹出框-->
    <el-dialog
        v-model="addVisible"
        title="输入学生信息"
        width="30%"
        draggable>

        <!--表单-->
      <el-form
          ref="addForm"
          :model="addObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addObj.name" />
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker
              v-model="addObj.birthday"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
          />

        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="addObj.phone" />
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="add()">添加</el-button>

          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>



    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      addVisible: false,
      updateVisible: false,
      updateObj: {},
      stuIPage: {},
      paramsObj: {},
      addObj: {},
      rules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {
            min: 3, max: 5,
            message: '长度在 3 到 5 个字符', trigger: 'blur'
          }],
        phone: [
          {required: true, message: '请输入电话', trigger: 'blur'},
          {
            pattern:/^1[35789]\d{9}$/,
            message: '电话格式为13、15、17、18、19开始的11位数',trigger: 'blur'
          }],
        birthday: [
          {required: true, message: '请输入生日', trigger: 'blur'},
        ]
      }
    }
  }, created() {
    this.findByItem(1);
  }, methods: {
    findByItem(pageNO) {
      this.paramsObj.pageNO = pageNO;
      axios.get("/project/student/findByItem", {params: this.paramsObj}).then(resp => {
        this.stuIPage = resp.data;
      })
    },
    findById(stu) {
      this.updateVisible = true;
      axios.get("/project/student/findById", {params: stu}).then(resp => {
        this.updateObj = resp.data;
      })
    },
    update() {
      axios.get("/project/student/update", {params: this.updateObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(this.stuIPage.current);
          this.updateVisible = false;
        }
      })
    },
    add() {
      axios.get("/project/student/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(this.stuIPage.pages);
          this.addVisible = false;
          this.resetForm();
        }
      })
    },
    del(stu) {
      axios.get("/project/student/del", {params: stu}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(this.stuIPage.current);
        }
      })
    },
    pageClick(pageNO) {
      this.findByItem(pageNO);
    },
    resetForm(){
      this.$refs.addForm.resetFields();
    }

  }
}
</script>

<style scoped>

</style>